<template>
  <div class="demo-form">
    <ep-row :gutter="10">
      <ep-col :col="3">
        <ep-advance-card :cardContStyle="{ padding: 0 }" contHeight="200px">
          <ep-tabs v-model="active" layout="left" theme="card" auto-height>
            <ep-tab-item name="one" label="基础表单"> </ep-tab-item>
            <ep-tab-item name="two" label="高级表单"> </ep-tab-item>
            <ep-tab-item name="three" label="分布表单"> </ep-tab-item>
            <ep-tab-item name="four" label="表单详情"> </ep-tab-item>
          </ep-tabs>
        </ep-advance-card>
      </ep-col>
      <ep-col :col="20">
        <template v-if="active === 'one'"><form1 /></template>
        <template v-if="active === 'two'"><form2 /></template>
        <template v-if="active === 'three'"><form3 /></template>
        <template v-if="active === 'four'"><form4 /></template>
      </ep-col>
    </ep-row>
  </div>
</template>

<script>
import form1 from './form/form1'
import form2 from './form/form2'
import form3 from './form/form3'
import form4 from './form/form4'
export default {
  components: {
    form1,
    form2,
    form3,
    form4
  },
  name: 'demo-form',
  data() {
    return {
      layout: 'left',
      active: 'one'
    }
  }
}
</script>

<style lang="less" scoped>
.demo-form {
  /deep/ .ep-tabs-panel {
    overflow: hidden !important;
  }
}
</style>
